<template>
    <div>
        <el-breadcrumb separator="/">
            <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item>系统管理</el-breadcrumb-item>
            <el-breadcrumb-item>附件管理</el-breadcrumb-item>
        </el-breadcrumb>
        <div class="appendix">
            <div class="appendix-form">
                <el-form  :inline="true" >
                    <el-form-item label="图片路径">
                        <el-input v-model="input" style="width: 230px" placeholder="输入图片路径查询"></el-input>
                    </el-form-item>
                    <el-form-item label="图片后缀">
                        <el-select  v-model="value" placeholder="请选择">
                            <el-option
                            v-for="item in options"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value">
                            </el-option>
                        </el-select>
                    </el-form-item>
                </el-form>
                <el-row class="appendix-btn">
                    <el-button type="primary" icon="el-icon-search">查询</el-button>
                    <el-button type="primary" icon="el-icon-upload" @click="centerDialogVisible = true">上传</el-button>
                </el-row>
                <el-dialog
                    title="上传图片附件"
                    :visible.sync="centerDialogVisible"
                    width="30%"
                    center>
                    <el-upload
                        class="upload-demo"
                        :limit="limit"
                        drag
                        action="https://jsonplaceholder.typicode.com/posts/"
                        multiple>
                        <i class="el-icon-upload" ></i>
                        <div class="el-upload__text" >将文件拖到此处，或<em>点击上传</em></div>
                        <div class="el-upload__tip" slot="tip">只能上传jpg/png文件，且不超过500kb,最多支持十张图片一起上传</div>
                    </el-upload>
                    <span slot="footer" class="dialog-footer">
                        <el-button @click="centerDialogVisible = false">取消并返回</el-button>
                        <el-button type="primary" @click="centerDialogVisible = false">上传到服务器</el-button>
                    </span>
                </el-dialog>
            </div>
            <el-pagination
                background
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :page-sizes="[6,10,15,20]"
                :page-size="6"
                layout="total, sizes, prev, pager, next, jumper"
                :total="1"
                >
            </el-pagination>
        </div>
        
    </div>
</template>

<script>
export default {
    name:"appendix",
    data() {
        return {
            options: [{
                value: '选项1',
                label: 'jpg/JPG'
            }, {
                value: '选项2',
                label: 'png/PNG'
            }, {
                value: '选项3',
                label: 'gif/GIF'
            }],
            input:"",
            value:"",
            centerDialogVisible: false,
            limit:10,
        }
    },
    methods: {
        //每页多少条
        handleSizeChange(val) {
            console.log(`每页 ${val} 条`);
        },
        //当前页
        handleCurrentChange(val) {
            console.log(`当前页: ${val}`);
        },
    },
}
</script>

<style lang="less" scoped>
    .appendix{
        height: 600px;
        border-radius: 5px;
        margin-top: 15px;
        box-sizing: border-box;
        box-shadow: 4px 4px 10px #b1b1b1;
        background-color: #FFFFFF;
        padding-left: 20px;
    }
    .appendix-form{
        display: flex;
        width: 100%;
        height: 500px;
        padding-top: 20px;
    }
    .appendix-btn{
        padding-left: 80px;
    }
</style>